@import '../custom.less';
@import '../mixins/common.less';

@tree-prefix-cls: ~'@{css-prefix}tree';
@tree-node-prefix-cls: ~'@{css-prefix}tree-node';
@input-prefix-cls: ~'@{css-prefix}input';
@tree-menu-prefix-cls: ~'@{css-prefix}tree-menu';

.@{tree-menu-prefix-cls} {
  @apply w-56;
  @apply relative;
  @apply text-xs;
  @apply pr-2;
  @apply pt-3;
  @apply ~'transition-[width]' duration-300 ease-in-out;

  &__toggle-button {
    @apply absolute;
    @apply cursor-pointer;
    @apply right-0;
    @apply top-1/2;
    @apply -translate-y-1/2;
    @apply translate-x-1/2;
    @apply z-10;
    @apply w-6;
    @apply h-6;
    @apply rounded-full;
    @apply text-lg;
    @apply ~'leading-[1.125rem]';
    @apply bg-white;
    @apply shadow-sm;
    @apply border border-solid border-color-border;
    .tiny-svg {
      @apply ~'ml-0.5';
      @apply fill-color-icon-secondary;
    }
  }

  &.is-collapsed {
    @apply w-0;
    .@{tree-menu-prefix-cls}__toggle-button {
      @apply -translate-y-1/2;
      @apply translate-x-2/3;
      .tiny-svg {
        @apply rotate-180;
      }
    }
    .@{input-prefix-cls} {
      @apply overflow-hidden;
      @apply p-0;
      .@{input-prefix-cls}-display-only {
        @apply inline-block;
        @apply w-0;
      }
    }
    .@{tree-prefix-cls} {
      @apply p-0;
    }
  }

  &.is-expand {
    width: 40px;
    .@{tree-menu-prefix-cls}__toggle-button {
      @apply -translate-y-1/2;
      @apply translate-x-2/3;
      .tiny-svg {
        @apply rotate-180;
      }
    }
    .@{input-prefix-cls} {
      @apply overflow-hidden;
      @apply p-0;
      .@{input-prefix-cls}-display-only {
        @apply inline-block;
        @apply w-0;
      }
    }
    .@{tree-prefix-cls} {
      @apply p-0;
    }
  }

  .@{input-prefix-cls} {
    @apply py-0 px-4;
    @apply mb-3;

    &.is-hidden {
      @apply invisible;
      @apply opacity-0;
    }

    &__inner {
      @apply pt-0 pr-12 pb-0 pl-3;
      @apply border-none;
      @apply border border-solid border-color-border;
    }

    &__prefix {
      left: unset;
      @apply right-8;

      > svg {
        @apply text-base;
        @apply fill-color-text-placeholder;
      }
    }
  }

  .@{tree-prefix-cls} {
    @apply overflow-y-auto;

    .@{tree-node-prefix-cls} {
      .@{tree-node-prefix-cls}__content {
        @apply h-12;
        line-height: 48px;
        @apply overflow-hidden;
        @apply mt-0;

        &:hover {
          @apply bg-color-bg-2;
        }

        .tree-node-icon {
          @apply order-1;
        }

        .tree-node-number {
          @apply order-1;
          @apply absolute;
          @apply right-4;
          @apply ~'max-w-[theme(spacing.9)]';
          @apply overflow-hidden;
          @apply text-sm;
        }

        .tree-node {
          @apply w-full;
          .@{tree-node-prefix-cls}__label {
            @apply ml-0;
          }
        }

        .tree-node-name {
          @apply py-0;
          @apply pl-1;
          @apply pr-3;
          svg {
            @apply h-4;
            @apply w-4;
            @apply ~'-mt-0.5';
            @apply mr-3;
            @apply fill-color-icon-primary;
          }
        }

        .@{css-prefix}checkbox {
          @apply ml-4;

          + .tree-node {
            .tree-node-name {
              @apply pl-2;
            }
          }
        }
      }

      .@{tree-node-prefix-cls}__label {
        @apply flex-1;
      }

      .@{tree-node-prefix-cls}__content-number {
        .tree-node-name {
          @apply pr-0;
        }
      }

      .@{tree-node-prefix-cls}__expand-icon {
        @apply fill-color-icon-secondary;
        @apply text-base;
      }

      &.is-current {
        & > .@{tree-node-prefix-cls}__content {
          @apply relative;
          @apply bg-color-fill-6;
          .tree-node-body {
            @apply text-color-brand;
            @apply font-normal;
            .tree-node-name {
              svg {
                @apply fill-color-brand;
              }
            }
          }

          .tree-node-icon {
            svg {
              @apply fill-color-brand;
            }
          }

          .tree-node-number {
            @apply text-color-brand;
            @apply font-normal;
          }

          &:hover {
            @apply bg-color-brand-disabled;
          }
        }
      }

      .tree-node-body {
        @apply text-color-text-primary;
        @apply block;

        &,
        &:hover {
          @apply no-underline;
        }
      }

      &.is-loading {
        .@{tree-node-prefix-cls}__content {
          .tree-node-name {
            @apply pl-0;
          }
        }
      }
    }

    &.only-check-children {
      .@{tree-prefix-cls}-node:has(.is-current) > .@{tree-prefix-cls}-node__content {
        & .tree-node-body {
          @apply text-color-brand;
        }

        & .@{tree-prefix-cls}-node__expand-icon {
          @apply fill-color-brand;
        }
      }
    }
  }

  & &__overflow {
    &.@{tree-prefix-cls} {
      .@{tree-node-prefix-cls} {
        .@{tree-node-prefix-cls}__content {
          .tree-node-name {
            @apply whitespace-nowrap;
            @apply overflow-hidden;
            @apply text-ellipsis;
            @apply block;
          }

          .tree-node {
            width: calc(100% - theme('spacing.8'));
          }
        }

        .@{tree-node-prefix-cls}__content-number {
          .tree-node {
            width: calc(100% - theme('spacing.14'));
          }
        }
      }
    }
  }

  & &__wrap {
    &.@{tree-prefix-cls} {
      .@{tree-node-prefix-cls}__content {
        @apply ~"min-h-[theme('spacing.12')]";
        @apply h-auto;
      }

      .tree-node-body {
        @apply ~"min-h-[theme('spacing.12')]";
        @apply flex;
        @apply items-center;
      }

      .@{tree-node-prefix-cls}__label {
        //兼容ie10-ie11
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
          @apply flex;
        }
      }

      .tree-node-name {
        @apply whitespace-normal;
        @apply leading-normal;
        @apply block;
        @apply break-all;
      }
    }
  }

  & &__expand {
    @apply h-16;
    @apply flex;
    @apply items-center;
    @apply ~'pl-3.5';
    @apply bottom-0;
    @apply left-0;
    @apply w-full;
    @apply bg-color-bg-1;

    svg {
      width: 22px;
      height: 22px;
      @apply cursor-pointer;

      &:hover {
        @apply fill-color-brand;
      }

      &:focus {
        @apply fill-color-brand;
      }
    }
  }

  &.@{tree-menu-prefix-cls}__collapse {
    @apply w-12;
    @apply pr-0;
    @apply overflow-hidden;
  }

  &.@{tree-menu-prefix-cls}__show-expand .@{tree-prefix-cls} {
    @apply pl-1;
  }
}
